<script setup lang="ts">
import { ElNotification } from "element-plus";
import { ref, onMounted, watch,computed } from "vue";
import { Book,try_search_books,try_get_books,BooksResult } from "./book";
import BooksView from "./BooksView.vue";

const keyword=ref<string>('')
const search_type=ref<string>('')
const search_type_options=[
    {label:'书名',value:'name'},
    {label:'作者',value:'author'},
    {label:'出版商',value:'publisher'},
]

const books=ref<Book[]>();
const page_offset=ref<number>(0)
const page_size=ref<number>(10)
const is_loading=ref<boolean>(false)
const max_page_index=ref<number>(0)

const can_search=computed(() => {
    return keyword.value.length>0 && search_type.value.length>0
})

onMounted(async ()=>{
    search_type.value=search_type_options[0].value
    await get_books()
})

const search_books=async ()=>{
    let errors=[]
    if (!keyword.value){
        errors.push('检索关键字不能为空!')
    }
    if (!search_type.value) {
        errors.push('检索类别不能为空!')
    }
    if (errors.length) {
        ElNotification.error({
            message:'检索操作失败!\n'+errors.join('\n'),
            title:'Error',
            duration:10000,
        })
        return
    }
    try {
        is_loading.value=true
        const result=await try_search_books(search_type.value!,keyword.value!,page_offset.value,page_size.value)
        set_books(result)
        is_loading.value=false
    } catch (error) {
        ElNotification.error({
            message:'检索图书失败!\n'+error,
            title:'Error',
            duration:10000,
        })
    }
}

const get_books=async ()=>{
    try {
        is_loading.value=true
        const result = await try_get_books(page_offset.value,page_size.value)
        set_books(result)
        is_loading.value=false
    } catch (error) {
        ElNotification.error({
            message:'获取图书失败!\n'+error,
            title:'Error',
            duration:10000,
        })
    }
}

watch(keyword,() => {
    page_offset.value=0
})

watch(page_offset,async ()=>{
    await page_offset_changed()
})

const set_books=async (result:BooksResult)=>{
    max_page_index.value=Math.ceil(result!.totalCount/result!.pageSize)
    books.value=result!.books
    page_offset.value=result!.pageOffset
    page_size.value=result!.pageSize
}

const page_offset_changed=async ()=>{
    if (can_search.value) {
        await search_books()
    }else{
        await get_books()
    }
}
const next_page=async ()=>{
    if (page_offset.value>=max_page_index.value-1) {
        return
    }
    page_offset.value+=1
}

const previous_page=async ()=>{
    if (page_offset.value<=0) {
        return
    }
    page_offset.value-=1
}

const jump_to_page=async (target_index:number)=>{
    target_index=Math.min(target_index,max_page_index.value)
    target_index=Math.max(target_index,1)
    if (target_index==page_offset.value+1) {
        return
    }
    page_offset.value=target_index-1
}


</script>

<template>
<div class="w-full h-full flex flex-col">
    <div id="search-panel" class="w-full text-xl flex-0 h-16 flex justify-center items-center gap-4">
        <el-input type="text" v-model="keyword"
        class="text-center rounded-full w-[400px] " 
        placeholder="检索关键字"
        clearable>
            <template #prepend>
                <el-select 
                v-model="search_type"
                placeholder="检索项目"
                style="width: 100px"
                >
                    <el-option 
                    v-for="option in search_type_options" 
                    :value="option.value"
                    :label="option.label"></el-option>
                </el-select>
            </template>
        </el-input>
        <el-button 
        type="primary" 
        :disabled="!can_search"
        @click="search_books()">检索</el-button> 
                <el-button 
        type="success" 
        text
        @click="page_offset_changed()">刷新</el-button> 
    </div>
    <div id="search-result" class="flex-1 w-full h-full">
        <BooksView
        :books="books"
        :max_page_index="max_page_index"
        :page_index="page_offset+1"
        :page_size="page_size"
        :is_loading="is_loading"
        @next_page="next_page()"
        @previous_page="previous_page()"
        @jump_to="jump_to_page(+$event)"
        ></BooksView>
    </div>
</div>

</template>

<style scoped lang="less">
</style>
